import React, { Component } from "react";
import { Link, withRouter } from "react-router-dom";
import { HomeOutlined, BookOutlined, InfoCircleOutlined } from '@ant-design/icons';
import { Menu } from 'antd';

class Nav extends Component {
	constructor(props) {
		super(props);
		this.state = {
			now: this._getNow(this.props.location)
		}
	}

	_getNow = (location) => {
		return location.pathname.split('/')[1]
	}

	shouldComponentUpdate(newProps) {
		let now = this._getNow(newProps.location);
		if (now != this.state.now) {
			this.setState({
				now
			})
			return false;
		}
		return true;
	}


	render() {
		let { mode, className } = this.props;
		let { now } = this.state;
		return (
			<Menu mode={mode} theme="dark" className={className} selectedKeys={[now]}>
				<Menu.Item key="index">
					<Link to="/index/all"><HomeOutlined />首页</Link>
				</Menu.Item>
				<Menu.Item key="book">
					<Link to="/book"><BookOutlined />书籍</Link>
				</Menu.Item>
				<Menu.Item key="about">
					<Link to="/about"><InfoCircleOutlined />关于</Link>
				</Menu.Item>
			</Menu>
		)
	}
}

export default withRouter(Nav);